<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>放大镜</title>
		<style>
			body,
			div,h1 {
				padding: 0px;
				margin: 0px;
			}
			h1{
				text-align: center;
					
			}

			#box1 {
				border: 2px solid black;
				width: 80%;
				margin: 10px auto;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: space-between;
			}

			#img1 {
				width: 200px;
				height: 200px;
				background-image: url("images.png");
				background-repeat: no-repeat;
				background-size: contain;
				background-origin: content-box;

			}

			#img2 {
				width: 200px;
				height: 200px;
				background-origin: content-box;
				background-size: contain;
				background-repeat: no-repeat;
				background-image: url("images.png");
				
			}
		</style>
	</head>
	<body>
		<h1>放大镜</h1>
		<div id="box1">
			<div id="img1"></div>
			<div id="img2">

			</div>
		</div>

		

	</body>
	<script>
		const box1 = document.getElementById("box1");
		const img1 = document.getElementById("img1");
		const img2 = document.getElementById("img2");
		img1.addEventListener("mouseover", function(event) {
			var x1 = event.offsetX;
			var y1 = event.offsetY;
			img2.style.backgroundSize = "400px 400px";
			img2.style.backgroundPosition = `-${x1}px -${y1}px`

		}, false);
		img1.addEventListener("mouseout", function() {
			img2.style.backgroundSize = "contain";
			img2.style.backgroundPosition = `0px 0px`
		}, false);
		img1.addEventListener("mousemove", function(event) {
			var x1 = event.offsetX;
			var y1 = event.offsetY;

			img2.style.backgroundPosition = `-${x1}px -${y1}px`
			//
		}, false)

		// 3、图片画廊放大镜效果?
		// 题目：创建一个图片画廊，展示多张小尺寸图片。当用户鼠标悬停在某张图片上时
		// ，使用 DOM 操作创建一个放大镜效果，在页面另一区域显示该图片的放大版本（放大比例为 2 倍）。?
		// 提示：通过addEventListener为图片添加鼠标悬停事件，使用cloneNode复制图片元素，
		// 修改复制元素的width和height属性实现放大，将放大后的图片添加到指定的 DOM 容器中。?
	</script>
</html>